<template>
	<div class="out">
		<div class="login-wrapper">
			<div class="login-main">
				<h3 class="login-title">注册</h3>
				<el-form :model="user" :rules="rules" ref="userForm">
					<el-form-item prop="userName">
						<el-input v-model="user.userName" placeholder="用户名"></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" show-password placeholder="密码" v-model="user.password"></el-input>
					</el-form-item>
					<el-form-item prop="userPhone">
						<el-input placeholder="联系方式" v-model="user.userPhone"></el-input>
					</el-form-item>
					<el-form-item prop="email">
						<el-input type="email" placeholder="邮箱" v-model="user.email"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button class="login-btn" type="primary" @click="register()">注册</el-button>
					</el-form-item>

					<router-link class="alink" to="/login">已有账号，去登录</router-link>
				</el-form>
			</div>
		</div>
	</div>

</template>

<script>
export default {
	name: "register",

	data() {
		return {
			user: {
				userName: "",
				password: "",
				userPhone: '',
				email: '',
			},
			rules: {
				userName: [
					{
						required: true,
						message: "用户名不能为空",
						trigger: ["blur", "change"],
					},
				],
				password: [
					{
						required: true,
						message: "请输入密码",
						trigger: ["blur", "change"],
					},
					{
						min: 6, message: '请输入不小于6位密码', trigger: 'blur'
					}
				],
				userPhone: [
					{
						required: true,
						message: '请输入电话号码',
						trigger: ["blur", "change"],
					},
					{

						min: 11, max: 11, message: '请输入11位的号码', trigger: 'blur'
					},
					{
						pattern: /^1[123456789]\d{9}$/,
						message: '请输入正确的手机号码'
					}
				],
				email: [
					{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
					{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
				]
			},
		};
	},
	methods: {
		register: function () {
			this.$refs["userForm"].validate((valid) => {
				if (!valid) {
					this.$message.error("登录表单字段输入格式有误");
					return false;
				}

				this.$Request
					.fetch_("/api/rentuser/register", "post", this.user)
					.then((result) => {
						if (result.status == this.$Request.OK_CODE) {
							// 注册成功
							this.$message.success(result.message);
							this.$router.push("/login");

						} else {
							this.$message.error(result.message);
							return false;
						}
					})
					.catch(() => { });
			});
		},
	},
};
</script>

<style scoped>
.out {
	margin-top: -60px;
	/* 100%窗口高度 */
	height: 100vh;
	/* 弹性布局 居中 */
	display: flex;
	justify-content: center;
	align-items: center;
	/* 渐变背景 */
	background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
}

.login-wrapper {
	height: 100%;
}

#canvas {
	width: 100%;
}

.login-main {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 320px;
	height: 370px;
	padding: 20px 35px;
	border: 1px solid #eee;
	margin: -185px 0 0 -160px;
	background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
}

.login-main::before,
.login-main::after {
	position: absolute;
	height: 12px;
	content: "";
}

.login-main::before {
	left: 4px;
	right: 4px;
	top: -12px;
	z-index: 2;
	background-color: #f5f5f5;
}

.login-main::after {
	left: 10px;
	right: 10px;
	top: -22px;
	z-index: 1;
	background-color: #f0f0f0;
}

.login-title {
	padding-bottom: 15px;
	border-bottom: 2px solid #459f75;
	margin: 15px 0 45px 0;
	color: #555;
	text-align: center;
	font-size: 30px;
}

.login-btn {
	width: 100%;
	height: 36px;
	margin-top: 30px;
	font-size: 16px;
}

.login-tip {
	color: #999;
	font-size: 12px;
	line-height: 30px;
}

.login-anim {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
}
</style>